<template>
	<view class="picker-main">
		<uv-tabs class="tabs" :list="pcateList" :current="activePcateIndex" @click="onTabChange" key-name="title" line-color="#04BABE"></uv-tabs>
		<swiper class="lists" :current="activePcateIndex" :duration="300" @change="onSwiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in pcateList" :key="index">
				<scroll-view
					class="scate-list"
					:scroll-y="true" 
					:scroll-x="false"
					:show-scrollbar="false"
					:scroll-with-animation="true"
				>
					<view class="item" :class="{active: index === activeScateIndex}" v-for="(item, index) in scateList" @tap="changeScate(index, item.id)">
						<text>{{item.title}}</text>
						<text class="count" v-if="pickedCount('scate', item.id) > 0">{{pickedCount('scate', item.id)}}</text>
					</view>
				</scroll-view>
				<scroll-view
					class="words-list"
					:scroll-x="false"
					:scroll-y="true"
					:scroll-with-animation="true"
				>
					<view class="item" :class="{active: pickedIds.includes(item.id)}" v-for="(item, index) in wordsList" @click="pickWord(item)">{{ item.title }}</view>
					<view style="clear: both"></view>
					<view class="empty" v-if="!wordsList">
						<image src="/static/images/nodata.png"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<view class="picker-footer">
			<!-- <view v-if="wordsPicked && wordsPicked.length > 0" class="words-list">
				<view v-for="(item, index) in wordsPicked" :key="index" class="item" :data-index="index" @tap="onWordsClick">
					{{ item.text.length > 15 ? item.text.substr(0, 15) + '...' : item.text }}
				</view>
				<view style="clear: both;" />
			</view> -->
			<view class="footer">
				<button class="btn btn-default" @tap="closeWordsPicker">取 消</button>
				<button class="btn btn-primary" @tap="setWords">确 定</button>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {
		props: {
			cates: {
				type: Array,
				default () {
					return []
				}
			},
			picked: {
				type: Array,
				default () {
					return []
				}
			},
			pcateIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				pcateList: [],
				wordsList: null,
				wordsCount: 0,
				wordsPicked: [],
				pickedIds: [],
				activePcateIndex: -1,
				activePcateId: 0,
				activeScateIndex: -1,
				activeScateId: 0,
			}
		},
		computed: {
			scateList() {
				if (this.activePcateIndex >= 0) {
					return this.cates[this.activePcateIndex].children
				} else {
					return []
				}
			}
		},
		watch: {
			cates: {
				handler() {
					this.pcateList = this.cates
					this.makeWordsList()
				},
				deep: true,
				immediate: true
			},
			pcateIndex: {
			  handler() {
				if (this.pcateIndex >= 0) {
					this.changePcate(this.pcateIndex)
				} else {
					this.activePcateIndex = -1
					this.activePcateId = 0
					this.wordsList = []
					this.wordsCount = 0
				}
		
				// 已设置的提示词
				this.wordsPicked = JSON.parse(JSON.stringify(this.picked))
				this.calcPickedIds()
			  },
			  immediate: true
			}
		},
		methods: {
			onTabChange: function(item) {
				this.changePcate(item.index)
			},
			onSwiperChange(e) {
				let index = e.target.current || e.detail.current
				this.changePcate(index)
			},
			changePcate(index) {
				let pcate = this.cates[index]
				this.setData({
					activePcateId: pcate.id,
					activePcateIndex: index,
					activeScateIndex: 0,
					activeScateId: pcate.children ? pcate.children[0].id : 0
				})
				this.makeWordsList()
			},
			getWordsList() {
				app.globalData.util.request({
					url: '/draw/getWordsList',
					data: {
						pcate: this.activePcateId
					}
				}).then(res => {
					if (this.scates && this.scates.length > 0) {
						this.activeScateId = this.scates[0].id
						this.activeScateIndex = 0
					}
					this.pcateList[this.activePcateIndex].wordsList = res.data.list
					this.makeWordsList()
				})
			},
			makeWordsList() {
				if (this.activePcateIndex < 0) {
					return
				}
				let list = [];
				let wordsList = this.pcateList[this.activePcateIndex].wordsList
				if (!wordsList) {
					this.getWordsList()
					return
				}
				if (this.activeScateId) {
					wordsList.forEach((item, index) => {
						if (item.scate === this.activeScateId) {
							list.push(item)
						}
					})
				} else {
					list = wordsList
				}
				this.wordsList = list
				this.wordsCount = list.length
			},
			changeScate(index, id) {
				this.activeScateIndex = index
				this.activeScateId = id
				this.makeWordsList()
			},
			closeWordsPicker(scate) {
				this.$emit('close')
			},
			setWords() {
				this.$emit('setWords', this.wordsPicked)
			},
			pickWord(item) {
				if (this.pickedIds.includes(item.id)) {
					for (var i = 0; i < this.wordsPicked.length; i++) {
						if (this.wordsPicked[i].id === item.id) {
							this.wordsPicked.splice(i, 1)
							break
						}
					}
				} else {
					this.wordsPicked.push({
						id: item.id,
						pcate: item.pcate,
						scate: item.scate,
						text: item.title,
						weight: 1
					})
				}
				this.calcPickedIds()
				this.pickedCount()
			},
			delWord(index) {
				this.wordsPicked.splice(index, 1)
				this.calcPickedIds()
			},
			pickedCount(type, id) {
				if (type === 'scate') {
					let count = 0
					this.wordsPicked.forEach(item => {
						if (item[type] === id) {
							count++
						}
					})
					return count
				} else {
					let pcateList = this.pcateList
					pcateList.forEach((cate, cateIndex) => {
						let count = 0
						this.wordsPicked.forEach(word => {
							if (word.pcate === cate.id) {
								count++
							}
						})
						pcateList[cateIndex].badge = {
							value: count
						}
					})
					this.pcateList = pcateList
				}
			},
			calcPickedIds() {
				let ids = []
				this.wordsPicked.forEach(item => {
					if (item.id) {
						ids.push(item.id)
					}
				})
				this.pickedIds = ids
			},
		}
	}
</script>

<style lang="scss" scoped>
	.picker-main {
		position: relative;
		height: 100%;
		overflow: hidden;
		
		.tabs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
			background: #fff;
			border-bottom: 1px solid #eee;
		}
			
		.lists {
			position: absolute;
			left: 0;
			right: 0;
			top: 94rpx;
			bottom: 0;
			width: 100%;
			height: auto;
		}
		
		.scate-list {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 140rpx;
			width: 180rpx;
			background: #f3f3f4;
			
		
			.item {
				float: left;
				display: block;
				text-align: center;
				line-height: 1.2;
				width: 100%;
				padding: 30rpx 16rpx;
				cursor: pointer;
				font-size: 24rpx;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				position: relative;
		
				&.active {
					color: #04BABE;
					background: #fff;
				}
		
				.count {
					position: absolute;
					right: 10rpx;
					top: 28rpx;
					margin-left: 10px;
					border-radius: 50%;
					background: #f56c6c;
					width: 16px;
					height: 16px;
					line-height: 16px;
					text-align: center;
					color: #fff;
					font-size: 12px;
				}
			}
		}
		.words-list {
			position: absolute;
			left: 180rpx;
			top: 0;
			bottom: 140rpx;
			width: 580rpx;
			background: #fff;
			padding: 12rpx;
			box-sizing: border-box;
		
			.item {
				float: left;
				width: 172rpx;
				height: 98rpx;
				background: #f3f3f4;
				float: left;
				margin: 6rpx 6rpx;
				padding: 6rpx 10rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				line-height: 1.2;
				cursor: pointer;
				border: 1px solid #fff;
				box-sizing: border-box;
				text-align: center;
				overflow: hidden;
				word-break: all;
				display: flex;
				justify-content: center;
				align-items: center;
		
				// &:hover {
				// 	background: #d1f2f3;
				// }
		
				&.active {
					background: #d1f2f3;
					border: 1px solid #04BABE;
					color: #04BABE;
				}
			}
		}
		
		.empty {
			text-align: center;
			margin: 0 60rpx;
			padding: 80rpx 0 100rpx 0;
			margin-top: 120rpx;
			border-radius: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
		

		.picker-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #f3f3f4;

			.words-picked {
				width: 100%;
				padding-top: 20px;

				.item {
					margin-right: 10px;
					margin-bottom: 10px;
				}
			}

			.footer {
				height: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn {
					margin: 0 20rpx;
				}
				.btn-default {
					background: #fff !important;
				}
			}
		}
	}
</style>